<template>
  <div class="main-view">
    <el-row type="flex"> 
      <el-col class="h-col-5" :span="5">
        <scatter> </scatter>
      </el-col>
       <el-col class="h-col-19" :span="19">
        <global-overview></global-overview>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col class="h-col-19" :span="19">
        <trend></trend>
      </el-col>
      <el-col class="h-col-5" :span="5"> 
        
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col class="h-col-24" :span="24"> 
        <parallel></parallel>
      </el-col>
    </el-row>
  <el-row type="flex">
      <el-col class="h-col-24" :span="24">
        <d3-area></d3-area>
      </el-col>
    </el-row>
    </div>
</template>

<script>
import Scatter from "@/components/Scatter";
import GlobalOverview from "@/components/GlobalOverview";
import Trend from "@/components/Trend";
import Parallel from "@/components/ParallelCoordinates";
import D3Area from "@/components/Area";

export default {
  name: "MainViewGraphs",
  components: {
    Scatter,
    GlobalOverview,
    Parallel,
    D3Area,
    Trend
  },
  data: function() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.main-view {
  background-color: rgba(255, 0, 0, 0);

  & > * {
    color: #b7b7b7;
    box-sizing: border-box;
  }
  [class*="h-col"] {
    border: 0.1px #ff000005;
    border-style: dashed;
  }
  .h-col {
    &-5 {
      width: 400px;
      height: 400px;
    }
    &-19 {
      width: 1520px;
      height: 400px;
    }
    &-24 {
      width: 1920px;
      height: 200px;
    }
  }
}
</style>
<style lang="scss">
body {
  // overflow-x:hidden;
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background-color: #f5f5f500;
  }

  &::-webkit-scrollbar {
    width: 12px;
    background-color: #f5f5f500;
    width: 5px;
    height: 5px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #d6292900;
  }
  &::-webkit-scrollbar-corner {
    background: #ff008000;
  }
}
</style>
